<template>
  <n-space
    vertical
    size="large"
    style="margin: 0px; height: 100%; width: 100%"
    content-style="padding: 0px; margin: 0px"
  >
    <n-layout
      :style="{ height: `${innerHeight}px`, padding: '0px', margin: '0px' }"
      content-style="padding: 0px; margin:0px;"
    >
      <n-layout-content content-style="padding: 0px;margin: 0px;">
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          style="margin: 40px 40px 40px 40px"
          size="large"
        >
          <n-form-item label="本地存储" path="configPath">
            <n-input-group>
              <n-input v-model:value="model.configPath" disabled="true" />
            </n-input-group>
          </n-form-item>
          <n-form-item label="模板地址" path="templatePath">
            <n-input-group>
              <n-input v-model:value="model.templatePath" disabled="true" />
              <n-button type="primary" @click="onTemplateClicked"
                >选择文件夹</n-button
              >
            </n-input-group>
          </n-form-item>
          <n-form-item label="生成地址" path="translatePath">
            <n-input-group>
              <n-input v-model:value="model.translatePath" disabled="true" />
              <n-button type="primary" @click="onTranslateClicked"
                >选择文件夹</n-button
              >
            </n-input-group>
          </n-form-item>
          <n-form-item>
            <div style="position: absolute; right: 0px">
              <n-button
                style="margin-right: 40px; width: 120px"
                type="success"
                @click="onResetClicked"
                >重置</n-button
              >
            </div>
          </n-form-item>
        </n-form>
      </n-layout-content>
    </n-layout>
  </n-space>
</template>

<script>
import { defineComponent, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import useWindowSize from "../composables/useWindowSize";
import IPC from "../background/ipc";

const defaultSetting = {
  templatePath: "~/vue-generator/template",
  translatePath: "~/vue-generator/translate",
};

export default defineComponent({
  setup() {
    const formRef = ref(null);

    const router = useRouter();

    const model = ref(defaultSetting);

    const type = ref(router.currentRoute.value.query.type);

    const linkId = ref(router.currentRoute.value.query.linkId);

    const { innerHeight } = useWindowSize();

    const onResetClicked = async () => {
      await IPC.invoke("setting.reset", {});
      let result = await IPC.invoke("setting.get", {});
      model.value = result.data;
    };

    const onTemplateClicked = async () => {
      let result = await IPC.invoke("dialog.openDirectory", {});
      model.value.templatePath = result.data;
    };

    const onTranslateClicked = async () => {
      let result = await IPC.invoke("dialog.openDirectory", {});
      model.value.translatePath = result.data;
    };

    watch(
      model,
      async () => {
        await IPC.invoke("setting.set", { settingInfo: model.value });
      },
      { deep: true }
    );

    onMounted(async () => {
      let result = await IPC.invoke("setting.get", {});
      model.value = result.data;
    });

    return {
      formRef,
      type,
      linkId,
      innerHeight,
      model,
      onResetClicked,
      onTemplateClicked,
      onTranslateClicked,
    };
  },
});
</script>
